<script setup lang="ts">
import { defineComponent, ref, reactive, onMounted, onActivated, getCurrentInstance, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { login } from "@/api/server_login";
import { ElMessage } from "element-plus";
import { User, Unlock } from '@element-plus/icons-vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

import { Delete, Edit, Search, Share, Upload, Files, Calendar } from '@element-plus/icons-vue'
import { right } from "@popperjs/core";



const router = useRouter();


const docs = async () => {
  console.log("check")
  router.push({ name: "home" })
};

// 项目内容
// 演示账号
const handleCommand = (command: string | number | object) => {
  ElMessage(`click on item ${command}`)
}
const input2 = ref('')

// 滚动
const state = reactive({
  direction: {
    default: "right",
    required: true
  },
  list: [
    {
      title: "--工业区A区段钢筋厂房及配套设施项目B2标段--"
    }
  ],
});
const { list } = toRefs(state);

</script>

<template>
  <!-- 标头 -->
  <div class="homepage-bangimg">
    <!-- 演示账号 -->
    <div class="homepage-bangimg-right">
      <div class="el-dropdown-link">
        中国河北
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          演示账号
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">
              <el-icon :size="14">
                <Edit />
              </el-icon>密码修改
            </el-dropdown-item>
            <el-dropdown-item command="b">
              <el-icon :size="14">
                <WarningFilled />
              </el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 标题 -->
    <div class="homepage-bangimg-box">
      <img class="homepage-bangimg-text" src="@/assets/image/tupianimg-(2).png" alt="">

    </div>
    <!-- 全部项目数据 -->
    <div class="homepage-project">
      <!-- 左 -->
      <div class="homepage-project-box">
        <div class="homepage-project-a"></div>
        <span class="homepage-project-b">全部项目</span>
        <span class="homepage-project-c">项目总数</span>
        <span class="homepage-project-b">1</span>
        <span class="homepage-project-c">个，</span>
        <span class="homepage-project-c">设备总数</span>
        <span class="homepage-project-b">128</span>
        <span class="homepage-project-c">个，</span>
        <span class="homepage-project-c">在线设备数</span>
        <span class="homepage-project-b">75</span>
        <span class="homepage-project-c">个</span>
      </div>
      <!-- 右 -->
      <div class="homepage-project-box-r">
        <div class="homepage-project-box-boder">
          <el-icon :size="18">
            <Files />
          </el-icon><span>项目汇总</span>
        </div>
        <div class="homepage-project-box-put">
          <el-input v-model="input2" placeholder="搜索" :prefix-icon="Search" />
        </div>

      </div>
    </div>
  </div>
  <!-- 项目内容 -->
  <div class="homepage-box">
    <div class="homepage-box-top">
      <div class="homepage-box-top-hom">
        <!-- 新建项目 -->

        <div class="homepage-box-top-hom-text">
          <Plus style="width: 20px; height: 20px; margin-bottom: 10px" />
          <div>新建项目</div>
        </div>
      </div>
      <!-- 完成项目 -->
      <div class="homepage-box-top-come">
        <div class="homepage-box-top-come-img">
          <!-- 点击显示 -->
          <div class="homepage-box-top-come-img-a">
            <el-button type="primary" @click="docs">进入项目</el-button>
            <el-button type="primary">项目概览</el-button>
            <el-button type="primary">管理看板</el-button>
          </div>
        </div>
        <!-- <img src="../../assets/image/home/project-a.png" alt=""> -->
        <div style="text-align: center;padding: 8px 0 2px 0;">XXXXXX建筑工程有限公司</div>
        <div class="homepage-box-top-come-biao">
          <!-- 滚动 -->
          <vue3-seamless-scroll :list="list" class="scroll" direction="left" :singleLine="true" :limitScrollNum="1"
            :step="0.3">
            <div class="item" v-for="(item, index) in list" :key="index">
              <span>{{ item.title }}</span>
            </div>
          </vue3-seamless-scroll>
          <div class="scroll-btn">
            <Edit style="width: 20px; height: 20px; margin-right: 8px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 标头 */
.homepage-bangimg {
  width: 100%;
  height: 290px;
  padding: 20px;
  background: url("@/assets/image/tupianimg (1).png") no-repeat;
  background-size: 100% 100%;
}

/* 演示账号 */
.homepage-bangimg-right {
  display: flex;
  justify-content: right;
}

.el-dropdown-link {
  font-size: 14px;
  color: rgb(197, 197, 197);
  margin-right: 20px;
}

/* 标头 */
.homepage-bangimg-box {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 0 0 50px;
}

.homepage-bangimg-text {
  width: 35%;
}

/* 全部项目数据 */
.homepage-project {
  margin: 0 0 0 50px;
  display: flex;
  justify-content: space-between;
}

/* 左 */
.homepage-project-a {
  width: 3px;
  height: 20px;
  border-radius: 5px;
  background-color: #2681ff;
  /* margin-right: 12px; */
}

.homepage-project-box {
  display: flex;
  align-items: center;
}

.homepage-project-b {
  margin: 10px;
  font-size: 14px;
  color: #2681ff;
}

.homepage-project-c {
  font-size: 14px;
  color: rgb(197, 197, 197);
}

.homepage-project-box-r {
  display: flex;
  align-items: center;
}

.homepage-project-box-boder {
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2681ff;
  border: 2px solid #2681ff;
  padding: 5px 5px 5px 10px;
  margin-right: 30px;
}

.homepage-project-box-boder span {
  margin: 0 8px;
  letter-spacing: 3px;
}


/* 项目内容 */
.homepage-box {
  width: 100%;
  height: calc(100% - 290px);
  /* padding: 20px 0 20px 20px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #0e1014;
  border-top: #43475b solid 1px;
}

/* 新建项目 */
.homepage-box-top {
  width: 100%;
  height: calc(50% - 20px);
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

/* 新建项目 */
.homepage-box-top-hom {
  width: calc(20% - 20px);
  height: 100%;
  background-color: #222c3d;
  margin: 10px;
  border: #43475b solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage-box-top-hom-text {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.6s;
  cursor: pointer;
}

/* 放大 */
.homepage-box-top-hom-text:hover {
  transform: scale(1.2, 1.2);
  transition: all 0.6s;
}

/* 新建完成项目 */
.homepage-box-top-come {
  width: calc(20% - 20px);
  height: 100%;
  background-color: #222c3d;
  margin: 10px;
  border: #43475b solid 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.homepage-box-top-come-img {
  width: 100%;
  height: 70%;
    background-image: url('@/assets/image/home/project-a.png');
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.homepage-box-top-come-img-a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.5s;
}
.homepage-box-top-come:hover .homepage-box-top-come-img-a{
   opacity: 1;
    display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0, 0.8);
  transition: all 0.5s;
}
.homepage-box-top-come:hover  {
  border: #2681ff solid 1px;
  transition: all 0.5s;
}

.homepage-box-top-come-biao {
  padding: 5px 5px 5px 15px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

/* 滚动 */
.scroll {
  height: 30px;
  width: 85%;
  overflow: hidden;
  font-size: 14px;
  color: rgb(151, 151, 151);
}
.scroll-btn {
  cursor: pointer;
}
</style>
